/*
 * @Author: liangliang
 * @Date: 2023-05-22 18:47:50
 * @LastEditors: yusha
 * @LastEditTime: 2023-08-25 10:07:39
 * @Description: 新增/修改发布计划
 */
import {
    Form,
    DatePicker,
    Divider,
    Input,
    Select,
    Space,
    Button,
    InputRef,
} from 'antd';
import React, { useState, useRef } from 'react';
import { PlusOutlined } from '@ant-design/icons';
import { useMount } from 'ahooks';
import dayjs from 'dayjs';
import './index.scss';

const EditPublishPlan = (props: any) => {
    const { formModal, rowItem } = props;
    const { modal, form } = formModal;
    const [name, setName] = useState('');
    const inputRef = useRef<InputRef>(null);
    const [items, setItems] = useState([
        // '客户端',
        // '订单',
        // '采购',
        // '结算',
        // '商品',
        // 'API',
        // 'wms',
        // '营销',
        // '直营商城',
        // '日本站',
        // '韩国站',
        // '英国站',
        '日本站',
        '采购供应链',
        '仓库',
        '韩英站',
        '美国站',
        '3FBOX',
        '技术部',
        '其他',
    ]);
    const mainDevelop = () => {
        const { demandFrontDevelop, demandBackDevelop } = rowItem;

        if (demandFrontDevelop && demandBackDevelop) {
            return `${demandFrontDevelop}、${demandBackDevelop}`;
        }
        if (demandFrontDevelop) {
            return `${demandFrontDevelop}`;
        }
        if (demandBackDevelop) {
            return `${demandBackDevelop}`;
        }

        return '';
    };

    useMount(() => {
        const {
            demandName,
            demandType,
            demoLink,
            demandLine,
            demandBackDevelop,
            demandFrontDevelop,
            demandTest,
            serviceName,
            infoTime,
            ...rest
        } = rowItem;

        form.setFieldsValue({
            demandBugName: demandName
                ? '【' + demandType + '】' + demandName
                : '',
            demandBugYunxiaoUrl: demoLink ? demoLink : '',
            prefixDemandBug: demandLine ? demandLine : '',
            demandPrdInfo: demandName ? demandName : '',
            mainDevelop: mainDevelop(),
            testDevelop: demandTest ? demandTest : '',
            researchInformFlag: '通知',
            publishFlag: '已发布',
            businessInformFlag: ['快速需求', '日常迭代', '项目'].includes(
                demandType
            )
                ? '通知'
                : '',
            serviceName: serviceName?.split(','),
            infoTime: infoTime ?? dayjs(),
            ...rest,
        });
    });
    const onNameChange = (event: React.ChangeEvent<HTMLInputElement>) => {
        setName(event.target.value);
    };
    const addItem = (
        e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>
    ) => {
        e.preventDefault();
        if (!name) return;
        setItems([name, ...items]);
        setName('');
        setTimeout(() => {
            inputRef.current?.focus();
        }, 0);
    };
    return (
        <>
            <Form
                name="editSupplierInfo"
                labelCol={{ span: 6 }}
                wrapperCol={{ span: 18 }}
                form={form}
            >
                <div>
                    {/* <span className="form-span">发布计划:</span> */}
                    <span className="form-span" style={{ color: 'red' }}>
                        注意: <br />
                    </span>
                    <span className="form-span">
                        钉钉群通知内容：【发布前缀】+发布内容 （【直营商城】
                        直营商城1.0成功上线）
                        <br />
                        <span className="form-span" style={{ color: 'red' }}>
                            发布需求涉及数据订正，必须要拉会过发布计划！！！{' '}
                            <br />
                        </span>
                    </span>

                    <hr />
                    <div className="form-item">
                        {/* 发布计划 */}
                        <Form.Item
                            label="需求名称"
                            name="demandBugName"
                            className="form-item-box-50"
                            rules={[
                                {
                                    required: false,
                                    message: '请输入需求/缺陷名称',
                                },
                            ]}
                        >
                            <Input
                                type="text"
                                readOnly
                                bordered={false}
                                placeholder="请输入需求/缺陷名称"
                            />
                        </Form.Item>
                        <Form.Item
                            label="需求地址"
                            name="demandBugYunxiaoUrl"
                            className="form-item-box-50"
                            rules={[{ required: false, message: '请输入' }]}
                        >
                            <Input
                                type="text"
                                readOnly
                                bordered={false}
                                placeholder="请输入需求/缺陷名称"
                            />
                        </Form.Item>
                        <Form.Item
                            label="发布前缀"
                            name="prefixDemandBug"
                            className="form-item-box-50"
                            rules={[
                                {
                                    required: true,
                                    message: '请选择发布计划前缀',
                                },
                            ]}
                        >
                            <Select
                                placeholder="选择需发布计划前缀"
                                dropdownRender={(menu) => (
                                    <>
                                        {menu}
                                        <Divider style={{ margin: '8px 0' }} />
                                        <Space style={{ padding: '0 8px 4px' }}>
                                            <Input
                                                style={{ width: 300 }}
                                                placeholder="请输入要添加的子项"
                                                ref={inputRef}
                                                value={name}
                                                onChange={onNameChange}
                                                onKeyDown={(e) =>
                                                    e.stopPropagation()
                                                }
                                            />
                                            <Button
                                                type="text"
                                                icon={<PlusOutlined />}
                                                onClick={addItem}
                                            >
                                                添加
                                            </Button>
                                        </Space>
                                    </>
                                )}
                                options={items.map((item) => ({
                                    label: item,
                                    value: item,
                                }))}
                            />
                        </Form.Item>
                        <Form.Item
                            label="发布内容"
                            name="demandPrdInfo"
                            className="form-item-box-50"
                        >
                            <Input placeholder="请输入需要发布的需求信息" />
                        </Form.Item>
                        <Form.Item
                            label="服务名称"
                            name="serviceName"
                            className="form-item-box-50"
                            rules={[
                                { required: true, message: '请选择服务名称' },
                            ]}
                        >
                            <Select
                                placeholder="请选择服务名称"
                                mode="multiple"
                                options={[
                                    { label: '订单', value: '订单' },
                                    { label: '采购', value: '采购' },
                                    { label: '结算', value: '结算' },
                                    { label: '用户', value: '用户' },
                                    { label: '仓库', value: '仓库' },
                                    { label: '商品', value: '商品' },
                                    { label: 'API', value: 'API' },
                                    { label: '营销', value: '营销' },
                                    { label: '前端', value: '前端' },
                                    { label: '其他', value: '其他' },
                                ]}
                            />
                        </Form.Item>
                        <Form.Item
                            label="开发分支"
                            name="gitBranch"
                            className="form-item-box-50"
                            rules={[{ required: false, message: '请输入' }]}
                        >
                            <Input placeholder="请输入技术方案链接" />
                        </Form.Item>
                        <Form.Item
                            label="开发负责人"
                            name="mainDevelop"
                            className="form-item-box-50"
                            rules={[
                                { required: true, message: '开发负责人必填！' },
                            ]}
                        >
                            <Input placeholder="请输入技术方案链接" />
                        </Form.Item>
                        <Form.Item
                            label="测试负责人"
                            name="testDevelop"
                            className="form-item-box-50"
                            rules={[
                                { required: true, message: '测试负责人必填！' },
                            ]}
                        >
                            <Input placeholder="请输入技术方案链接" />
                        </Form.Item>
                        <Form.Item
                            label="发布状态"
                            name="publishFlag"
                            className="form-item-box-50"
                            rules={[
                                { required: true, message: '请选择发布状态' },
                            ]}
                        >
                            <Select
                                placeholder="请选择发布状态"
                                defaultValue={'已发布'}
                                options={[
                                    { label: '已发布', value: '已发布' },
                                    { label: '暂停发布', value: '暂停发布' },
                                ]}
                            />
                        </Form.Item>
                        <Form.Item
                            label="是否通知技术"
                            name="researchInformFlag"
                            className="form-item-box-50"
                            rules={[
                                {
                                    required: true,
                                    message: '请选择是否通知技术',
                                },
                            ]}
                        >
                            <Select
                                placeholder="请选择是否通知技术"
                                options={[{ label: '通知', value: '通知' }]}
                            />
                        </Form.Item>
                        <Form.Item
                            label="是否通知业务"
                            name="businessInformFlag"
                            className="form-item-box-50"
                            rules={[
                                {
                                    required: true,
                                    message: '请选择是否通知业务',
                                },
                            ]}
                        >
                            <Select
                                placeholder="请选择是否通知业务"
                                options={[
                                    { label: '通知', value: '通知' },
                                    { label: '不通知', value: '不通知' },
                                ]}
                            />
                        </Form.Item>
                        <Form.Item
                            label="业务配置"
                            name="businessConfigFlag"
                            className="form-item-box-50"
                            rules={[
                                {
                                    required: true,
                                    message: '请选择是否通知业务',
                                },
                            ]}
                        >
                            <Select
                                placeholder="请选择是否通知业务"
                                options={[
                                    { label: '是', value: '是' },
                                    { label: '否', value: '否' },
                                ]}
                            />
                        </Form.Item>
                        <Form.Item
                            label="发布计划地址"
                            name="publisPlanAddress"
                            className="form-item-box-50"
                            rules={[{ required: false, message: '请输入' }]}
                        >
                            <Input placeholder="请输入" />
                        </Form.Item>
                        <Form.Item
                            label="通知时间"
                            name="infoTime"
                            className="form-item-box-50"
                            rules={[{ required: true }]}
                        >
                            <DatePicker style={{ width: '50%' }} />
                        </Form.Item>
                        <Form.Item
                            label="备注"
                            name="remark"
                            className="form-item-box-50"
                            rules={[{ required: false, message: '请输入备注' }]}
                        >
                            <Input.TextArea rows={5} placeholder="请输入备注" />
                        </Form.Item>
                    </div>
                </div>
            </Form>
        </>
    );
};

export default EditPublishPlan;
